<template>
  <div>
    <van-popup v-model="show" closeable position="bottom" :style="{ height: 'auto' }">
      <div class="header">
        <div style="height: 50px; line-height: 50px;">{{ obj.title }}</div>
        <div class="hei_mi"><span>非常不同意</span><span>非常同意</span></div>
        <van-rate v-model="value" :size="30" gutter="10" color="#ffd21e" void-icon="star" void-color="#eee" />
        <div style="margin-top: 20px;">{{ obj.describe }}<span style="font-size: 12px;color: #aaa;">(多选)</span></div>
      </div>
      <div class="hea_list">
        <div v-for="item in obj.list" style="margin-top: 20px;"><input type="checkbox" style=" margin:0 20px;">{{ item.title }}</div>
      </div>
    </van-popup>

    <div class="edit" @click="eject">
      <van-icon name="edit" />
      <span style="font-size: 12px;">反馈</span>


      <!-- 自定义图标 -->

    </div>
  </div>
</template>

<script>
export default {
  props:{
    obj:{
      type:Object,
      default:()=>({})
    }
  },
  data() {
    return {
      show: false,
      value: 0,
     
    }
  },
  methods: {
    eject() {  
      this.show = true
    }
  },
}
</script>

<style lang="scss" scoped>
.header{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  .hei_mi{
    width: 190px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
  }
}
.hea_list{
  border: 0;
 
 
}
.edit {
  position: fixed;
  right: 10px;
  bottom: 150px;
  z-index: 10;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 34px;
  height: 34px;
  border-radius: 17px;


  i {
    font-size: 18px;
  }
}
</style>